<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>禁止输入</title>
    <link rel="stylesheet" type="text/css" href="../../common/sui.css">
    <style type="text/css">
        .box {
            width: 500px;
            margin: 20px auto 0;
            padding: 40px 20px;
        }
    </style>
</head>

<body>
    <form class="box sui-form form-horizontal sui-validate">
        <div class="control-group">
            <label for="text" class="control-label">请输入用户名:</label>
            <div class="controls">
                <input type="text" placeholder="请输入用户名" id="input">
            </div>
        </div>
        <div class="control-group">
            <label for="text" class="control-label">&nbsp;</label>
            <div class="controls">
                <a href="javascript:;" class="sui-btn" onclick="operate(this)">禁止</a>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        function operate(self) {
            if (self.innerHTML == "禁止") {
                self.innerHTML = "激活";
                document.getElementById('input').disabled = true;
            } else {
                self.innerHTML = "禁止";
                document.getElementById('input').disabled = false;
            }
        }
    </script>
</body>

</html>